.banner {position: relative;width: 1200px;margin: 0 auto;height: 192px;overflow: hidden;}
.change-logo{background: 0 0;position: absolute;top: 20px;z-index: 20;}
.rightnav{position:absolute;top:20px;z-index:21;right:20px;height:50px;line-height:50px;}
.rightnav a{font-size:20px;font-weight:600;}
.sitelogo {width: 100px;}
.change-bg {position: relative;width: 100%;max-width: 1200px;background: url(../images/building.png) 50% bottom no-repeat;background-size: 630px 140px;height: 197px;margin: 0 auto;z-index: 2;}
.yun1 {background: url(../images/cloud1.png) 50% no-repeat;background-size: 70px;height: 36px;width: 78px;position: relative;bottom: 96px;z-index: 5;left: -80px;}
.piao1 {animation-name: piaoyi;animation-delay: 0s;animation-duration: 60s;animation-iteration-count: infinite;animation-timing-function: linear}
.yun2 {background: url(../images/cloud2.png) 50% no-repeat;background-size: 100%;height: 37px;width: 156px;position: relative;bottom: 190px;z-index: 6;left: -156px;}
.piao2 {animation-name: piaoyi;animation-delay: 10s;animation-duration: 60s;animation-iteration-count: infinite;animation-timing-function: linear;}
.yun3 {background: url(../images/cloud3.png) 50% no-repeat;background-size: 100%;height: 32px;width: 56px;position: relative;bottom: 150px;z-index: 7;left: -56px;}
.piao3 {animation-name: piaoyi;animation-delay: 18s;animation-duration: 60s;animation-iteration-count: infinite;animation-timing-function: linear;}
.yun4 {background: url(../images/cloud4.png) 50% no-repeat;background-size: 100%;height: 29px;width: 54px;position: relative;bottom: 206px;z-index: 8;left: -54px;}
.piao4 {animation-name: piaoyi;animation-delay: 24s;animation-duration: 60s;animation-iteration-count: infinite;animation-timing-function: linear;}
.che1 {background: url(../images/car4.png) no-repeat;height: 50px;width: 50px;position: relative;background-size: 50px;bottom: 164px;z-index: 3;}
.sudu1 {animation-name: sudu1;animation-delay: 0s;animation-duration: 30s;animation-iteration-count: infinite;animation-timing-function: linear;}
.che2 {background: url(../images/car3.png) no-repeat;height: 50px;width: 50px;position: relative;background-size: 50px;bottom: 212px;z-index: 3;}
.sudu2 {animation-name: sudu2;animation-delay: 0s;animation-duration: 20s;animation-iteration-count: infinite;animation-timing-function: linear;}
.che3 {background: url(../images/car2.png) no-repeat;height: 50px;width: 83px;position: relative;background-size: 72px;bottom: 272px;z-index: 3;}
.sudu3 {animation-name: sudu3;animation-delay: 0s;animation-duration: 30s;animation-iteration-count: infinite;animation-timing-function: linear;}
.che4 {background: url(../images/car1.png) no-repeat;height: 50px;width: 83px;position: relative;background-size: 54px;bottom: 318px;z-index: 3;left:-84px;}
.sudu4 {animation-name: sudu4;animation-delay: 6s;animation-duration: 15s;animation-iteration-count: infinite;animation-timing-function: linear;}
.change-wrapper{width:1200px;margin:0 auto;background:#fff;border:1px solid #ddd;}
.change-searchbox{position:relative}
.change-search{display:flex;justify-content:space-between;background:#f7f7f7;padding:15px 0 15px 20px;}
.change-keywords{background:#fff;width:300px;border:1px solid #ddd;padding:8px 10px;font-size:14px;outline:0;display:inline;vertical-align:middle;border-radius:2px;}
.change-keywords:focus{border:1px solid #38beef;}
.icon-sousuo{font-weight:bold;font-size:18px !important;color:#888;display:inline;vertical-align:middle;position:relative;left:-35px;}
.change-hotcity{display:flex;justify-content:flex-start;padding:10px 120px 0 0;}
.changitemsbox{display:flex;padding:20px 0 10px 30px;justify-content:flex-start;}
.changitemsbox .citylist{display:flex;flex-wrap:wrap;width:900px;}
.change-hotcity h4,.change-hotcity a,.changitemsbox h4,.changitemsbox a{padding-right:6px;color:#333;}
.change-hotcity a:hover,.change-hotcity a.red,.changitemsbox a:hover,.change-diqu .change-citylist a:hover{color:#ff4000;text-decoration:none;}
.change-hotcity h4,.changitemsbox h4{font-weight:400;color:#888;font-size:14px;padding-right:20px;}
.change-diqu{padding:20px 0 10px 30px;display:flex;}
.change-diqu .change-citylist{display:flex;justify-content:flex-start;padding:0 0 10px 30px;width:1000px;}
.change-diqu .cityitems{display:flex;flex-wrap:wrap;width:900px;}
.change-diqu h4,.change-diqu{font-size:14px;color:#888;font-weight:400;}
.change-diqu .change-citylist h5,.change-diqu .change-citylist a{font-size:14px;padding:2px 10px;color:#333;}
.change-diqu .change-citylist h5{color:#f49;font-weight:normal;}
.search-citylist {position:absolute;display:none;border: 1px solid #ddd;width:315px;max-height: 200px;overflow: scroll;background-color: #fff;overflow-x: hidden;overflow-y: auto;padding-left:5px;margin-top:-1px;}
.search-citylist li {position: relative;margin: 0;padding: 3px 1em 3px 0.4em;cursor: pointer;min-height: 0;}
.search-citylist li:hover{color:#38beef}

@keyframes piaoyi {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px,0,0);
		transform: translate3d(100px,0,0)
	}

	2%,98% {
		opacity: 1
	}

	100% {
		opacity: 0;
		-webkit-transform: translate3d(1100px,0,0);
		transform: translate3d(1100px,0,0)
	}
}
@keyframes sudu2 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(1100px,0,0);
        transform: translate3d(1100px,0,0)
    }

    2%,90% {
        opacity: 1
    }

    91%,100% {
        opacity: 0
    }

    96% {
        opacity: 0;
        -webkit-transform: translate3d(-1px,0,0);
        transform: translate3d(-1px,0,0)
    }
}
@keyframes sudu1 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(1200px,0,0);
        transform: translate3d(1200px,0,0)
    }

    4%,90% {
        opacity: 1
    }

    96% {
        opacity: 0;
        -webkit-transform: translate3d(-1px,0,0);
        transform: translate3d(-1px,0,0)
    }

    100% {
        opacity: 0
    }
}
@keyframes sudu3 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-1px,0,0);
        transform: translate3d(-1px,0,0)
    }

    2%,95% {
        opacity: 1
    }

    96% {
        opacity: 0;
        -webkit-transform: translate3d(1100px,0,0);
        transform: translate3d(1100px,0,0)
    }

    100% {
        opacity: 0
    }
}
@keyframes sudu4 {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-1px,0,0);
        transform: translate3d(-1px,0,0)
    }

    2%,98% {
        opacity: 1
    }

    99% {
        opacity: 0;
        -webkit-transform: translate3d(1200px,0,0);
        transform: translate3d(1200px,0,0)
    }

    100% {
        opacity: 0
    }
}